<template>
	<!-- 
		1. 页面文件遵循 Vue 单文件组件 (SFC) 规范，即每个页面是一个.vue文件
		2. 组件标签靠近小程序规范，详见uni-app 组件规范
		3. 接口能力（JS API）靠近小程序规范，但需将前缀 wx、my 等替换为 uni，详见uni-app接口规范
		4. 数据绑定及事件处理同 Vue.js 规范，同时补充了应用生命周期及页面的生命周期
			页面用小程序的生命周期，组件用vue的生命周期
		5. 如需兼容app-nvue平台，建议使用flex布局进行开发
		
		直接使用 "/" 表示根目录, 也可以使用 "@/" 表示根目录
	 -->
	
	<view class="content">
		<image class="logo" src="@/static/logo.png" @click="fn"></image>
		<view class="text-area">
			<text class="title box">{{title}} - {{username}}</text>
		</view>
		<!-- uniapp是可以和vue一样使用组件的 -->
		<childVue />
		
		<uni-card>
			<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
		</uni-card>
		<uni-dateformat date="2020/10/20 20:20:20"></uni-dateformat>
	</view>
</template>

<script>
	// import childVue from './child.vue';
	import childVue from '/pages/index/child.vue';
	import {add} from "/utils/index.js"
	
	import json from "../../mock/products.json";
	
	import store from '@/store/index.js';//需要引入store
	
	export default {
		data() {
			return {
				title: 'Hello123'
			}
		},
		computed: {
			username() {
				return store.state.username
			}
		},
		methods: {
			fn() {
				store.commit("changeName")
			}
		},
		components: {
			childVue
		},
		// onLoad是小程序的生命周期
		onLoad() {
			console.log("onLoad");
			console.log(add(3,4));
			console.log(json);
		},
		// mounted是vue的生命周期
		mounted() {
			console.log("mounted");
		},
		onShow() {
			console.log("onshow");
		},
	}
</script>

<style lang="scss">
	@import url("../../static/index.css");
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		/* color: #8f8f94; */
		/* height: var(--status-bar-height); */
		color: $secondary-color;
	}
</style>
